<template>
  <div>
    <Header :show="false" />
    <Right />
    <!-- 轮播图 -->
    <el-carousel :interval="5000" arrow="never" height="772px">
      <el-carousel-item v-for="(item, index) in list" :key="index">
        <img :src="item" alt style="width:100%;height:100%" />
      </el-carousel-item>
    </el-carousel>
    <!-- 搜索框 -->
    <div class="select">
      <div class="select_box">
        <p class="exclusive">
          <span class="Atonce">立即搜索</span>
          <span class="plan">你的专属搜索方案</span>
        </p>
        <p class="select_ipt">
          <el-input
            placeholder="区域/小区/商圈/关键字"
            v-model="search"
            class="input-with-select"
            @keyup.enter="Onsearch"
          ></el-input>
          <span class="select_btn1" @click="OnMap">
            <img src="../../assets/img/map_icon.png" alt />
            地图找房
          </span>
          <span class="select_btn cur" @click="Onsearch">
            <i class="el-icon-search"></i>
            立即搜索
          </span>
        </p>
        <!-- <p class="more cur">
          <span>更多 ：</span>
          <span>住宅</span>
          <span>公寓</span>
          <span>商业</span>
        </p>-->
      </div>
    </div>
    <!-- tab切换 -->
    <div class="box">
      <!-- tab切换 -->
      <p class="title">本周好房</p>
      <p class="subhead">
        <span class="subhead_left">周周好房源,天天都低价</span>
        <span class="subhead_right cur" @click="submitForm()">
          <img src="../../assets/img/subscribe.png" alt />
          <span>免费订阅</span>
        </span>
      </p>
      <div class="tab_title cur">
        <p :class="[tabNum === 1 ? 'ontab' : '']" @click="funtab(1)">本周上新</p>
        <p :class="[tabNum === 2 ? 'ontab' : '']" @click="funtab(2)">本周开拍</p>
        <p :class="[tabNum === 3 ? 'ontab' : '']" @click="funtab(3)">本周特惠</p>
      </div>
      <div class="tab" v-if="tabList">
        <div
          v-for="(item, index) in tabList"
          :key="index"
          class="tab_detalis"
          @click="onDetails(item.id)"
        >
          <div class="picture">
            <img :src="item.img[0]" alt v-if="item.img" />
            <img src="../../assets/img/demo.png" alt v-else />
            <p
              class="soon"
              :class="[item.sellStage === '即将拍卖' ? 'soonGreen' : 'soonRed']"
            >{{ item.sellStage }}</p>
            <p class="time" v-if="item.startSaleTimeStr">开拍时间：{{ item.startSaleTimeStr }}</p>
            <p class="time" v-else>开拍时间：</p>
          </div>

          <div>
            <p class="address">{{ item.title }}</p>
            <p class="details">
              {{ item.bedRoomCount }}室{{ item.visitorRoomCount }}厅 ·
              {{ item.coveredArea }}㎡ · {{ item.directionName }}
            </p>
            <p class="price">
              市场价：
              <span v-if="item.marketSalePrice">{{ item.marketSalePrice }}</span>
              <span v-else>--</span>万
            </p>
            <div class="startPrice">
              <p class="start">
                起拍价：
                <span v-if="item.startSalePrice">{{ item.startSalePrice }}万</span>
                <span v-else>--万</span>
              </p>
              <p class="btn" @click="On53">咨询</p>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="untab">暂无数据</div>
    </div>
    <!-- 留言 -->
    <div class="service">
      <div class="box">
        <p class="title">一站式服务</p>
        <p class="subhead">
          <span class="subhead_left">全流程 有保障</span>
        </p>
        <div class="one_stop">
          <div
            class="derstand"
            v-for="(item, index) in oneStopList"
            :key="index"
            @click="Onstap(item.id)"
          >
            <!-- @mouseout="Onstap(item.id)" -->
            <p class="num" :class="[oneStop == item.id ? 'onNum' : 'unNum']">{{ item.id }}</p>
            <img :src="[oneStop == item.id ? item.unimg : item.img]" alt />

            <p :class="[oneStop == item.id ? 'text' : '']">{{ item.text }}</p>
          </div>
        </div>
        <img src="../../assets/img/message.png" alt @click="messageForm()" />
      </div>
    </div>
    <!-- 自由购 -->
    <div class="liberty">
      <div class="cards">
        <div
          class="card"
          :class="[borderText === '自由购' ? 'noborder' : 'border']"
          @click="fuborder('自由购')"
        >
          <div class="free">
            <p :class="[borderText === '自由购' ? 'ontitle' : 'title']">自由购</p>
            <p class="subhead">不受限制，实现购房自由</p>
            <p :class="[borderText === '自由购' ? 'line' : 'noline']"></p>
            <p class="btn" @click="Onmore">去发现更多</p>
          </div>
          <div class="picture">
            <img src="../../assets/img/zyg.png" alt />
            <p class="text" @click="customized = true">
              不满意？我们帮你
              <span class="customized">定制</span>
            </p>
          </div>
        </div>
        <div
          class="card"
          :class="[borderText === '刚需捡漏' ? 'noborder' : 'border']"
          @click="fuborder('刚需捡漏')"
        >
          <div class="collect">
            <p :class="[borderText === '刚需捡漏' ? 'untitle' : 'title']">刚需捡漏</p>
            <p class="subhead">省钱是常态</p>
            <p :class="[borderText === '刚需捡漏' ? 'online' : 'noline']"></p>
            <p class="onbtn" @click="Onmore">去发现更多</p>
          </div>
          <div class="picture">
            <img src="../../assets/img/gxjl.png" alt />
            <p class="text" @click="onsolve">
              钱不够？准专业团队帮您
              <span class="customized">解决</span>
            </p>
          </div>
        </div>
      </div>
      <div class="content" v-if="purchList">
        <div class="tab">
          <div
            v-for="(item, index) in purchList"
            :key="index"
            class="tab_list"
            @click="onDetails(item.id)"
          >
            <div class="picture">
              <img :src="item.img[0]" alt v-if="item.img" />
              <img src="../../assets/img/demo.png" alt v-else />
              <p
                class="soon"
                :class="[
                  item.sellStage === '即将拍卖' ? 'soonGreen' : 'soonRed'
                ]"
              >{{ item.sellStage }}</p>
              <p class="rebate" v-if="item.discount != 10">
                <span v-if="item.discount">{{ item.discount }}</span>
                <span v-else>--</span>折
              </p>
              <p
                class="time"
                v-if="item.startSaleTimeStr "
                style="left: 60px;"
              >开拍时间：{{ item.startSaleTimeStr }}</p>
              <p class="time" v-else style="left: 60px;">开拍时间暂定</p>
              <!-- <div class="camera">
                <p class="start">开拍时间</p>
                <p class="hour">{{ item.startSaleTimeStr }}</p>
              </div>-->
            </div>

            <div>
              <p class="address">{{ item.title }}</p>
              <p class="details">
                {{ item.bedRoomCount }}室{{ item.visitorRoomCount }}厅 ·
                {{ item.coveredArea }}㎡ · {{ item.directionName }}
              </p>
              <p class="price">
                市场价：
                <span v-if="item.marketSalePrice">{{ item.marketSalePrice }}</span>
                <span v-else>--</span>万
              </p>
              <div class="startPrice">
                <p class="start">
                  起拍价：
                  <span v-if="item.startSalePrice">{{ item.startSalePrice }}万</span>
                  <span v-else>--</span>
                </p>
                <p class="btn" @click="On53">咨询</p>
              </div>
            </div>
          </div>
        </div>
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          :page-size="3"
          class="pageSize"
          :current-page.sync="page"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
      <div v-else class="untab">暂无数据</div>
    </div>
    <!-- 金融贷款  finance -->
    <div class="finance">
      <div class="head">
        <p class="head_title">金融贷款</p>
        <p>全流程 有保障</p>
        <p class="present">
          法拍按揭贷款，二手房按揭贷款，消费贷款，信用贷款，过桥垫资，质押抵押；
          权威银行合作，专业金融配比，审批快，到账快，安全有保障
        </p>
      </div>
      <div class="bankList">
        <div class="bank">
          <div v-for="(item, index) in bankList" :key="index">
            <img :src="item" alt />
          </div>
        </div>

        <!-- <p class="moreBtn">MORE+</p> -->
      </div>
    </div>

    <!-- 法务权证 -->
    <div class="law">
      <div class="box">
        <p class="title">法务权证</p>
        <p class="subhead">
          <span class="subhead_left">不良资产服务顾问</span>
        </p>
      </div>
      <div class="post">
        <div v-for="(item, index) in methodList" :key="index" class="post_box_item">
          <div class="post_box">
            <!-- @click="Onpost(index)"
            :class="[numpost == index ? 'unpost_box' : '']"-->
            <p class="line"></p>
            <div class="center">
              <p class="center_title">{{ item.title }}</p>
              <p class="indirect">{{ item.text }}</p>
            </div>
            <div class="center_img">
              <img :src="item.img" alt />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 全程服务 -->
    <div class="course">
      <div class="box">
        <p class="title">全程服务</p>
        <p class="subhead">
          <span class="subhead_left">让买房成为简单且幸福的事儿</span>
        </p>
      </div>
      <div class="switch">
        <div class="tab_card">
          <div
            @click="Ontabcard(1)"
            class="tab1 card_tab"
            :class="[tabCard == '1' ? 'card_On' : '']"
          >
            <p :class="[tabCard == '1' ? 'Oncard_title' : 'card_title']">拍卖前</p>
            <p class="card_text">BEFORE AUCTION</p>
            <img
              style="right:35px"
              :src="[
                tabCard == 1
                  ? require(`@/assets/img/pmh2.png`)
                  : require(`@/assets/img/pmq1.png`)
              ]"
              alt
            />
          </div>
          <div
            @click="Ontabcard(2)"
            class="tab2 card_tab"
            :class="[tabCard == '2' ? 'card_On' : '']"
          >
            <p :class="[tabCard == '2' ? 'Oncard_title' : 'card_title']">拍卖中</p>
            <p class="card_text">AT AUCTION</p>
            <img
              :src="[
                tabCard == 2
                  ? require(`@/assets/img/pmq2.png`)
                  : require(`@/assets/img/pmz1.png`)
              ]"
              alt
            />
          </div>
          <div
            @click="Ontabcard(3)"
            class="tab3 card_tab"
            :class="[tabCard == '3' ? 'card_On' : '']"
          >
            <p :class="[tabCard == '3' ? 'Oncard_title' : 'card_title']">拍卖后</p>
            <p class="card_text">AFTER THE AUCTION</p>
            <img
              @click="Ontabcard(3)"
              :src="[
                tabCard == 3
                  ? require(`@/assets/img/pmz2.png`)
                  : require(`@/assets/img/pmh1.png`)
              ]"
              alt
            />
          </div>
          <!-- 
         
          -->
        </div>
        <div class="tab_conter" v-if="tabCard == 1">
          <div
            v-for="(item, index) in tabcardOne"
            :key="index"
            class="card"
            @mouseover="changeActive($event)"
            @mouseout="removeActive($event)"
          >
            <img class="image" :src="item.img" alt />
            <div>
              <p class="title">{{ item.title }}</p>
              <p class="conter">{{ item.text }}</p>
            </div>
            <div class="service_div" @click="On53">
              <img src="../../assets/img/djzx.png" alt class="service_img" />
            </div>
          </div>
        </div>
        <div class="tab_conter" v-if="tabCard == 2">
          <div
            v-for="(item, index) in tabcardTwo"
            :key="index"
            class="card"
            @mouseover="changeActive($event)"
            @mouseout="removeActive($event)"
          >
            <img class="image" :src="item.img" alt />
            <div>
              <p class="title">{{ item.title }}</p>
              <p class="conter">{{ item.text }}</p>
            </div>
            <div class="service_div" @click="On53">
              <img src="../../assets/img/djzx.png" alt class="service_img" />
            </div>
          </div>
        </div>
        <div class="tab_conter" v-if="tabCard == 3">
          <div
            v-for="(item, index) in tabcardThree"
            :key="index"
            class="card"
            @mouseover="changeActive($event)"
            @mouseout="removeActive($event)"
          >
            <img class="image" :src="item.img" alt />
            <div>
              <p class="title">{{ item.title }}</p>
              <p class="conter">{{ item.text }}</p>
            </div>
            <div class="service_div" @click="On53">
              <img src="../../assets/img/djzx.png" alt class="service_img" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer />
    <el-dialog
      :visible.sync="dialogTableVisible"
      :append-to-body="true"
      :lock-scroll="false"
      width="35%"
      title="免费订阅"
      :close-on-click-modal="true"
      class="subscribe"
    >
      <Subscribe v-on:Onsubscribe="Onsubscribe" />
    </el-dialog>
    <el-dialog
      :visible.sync="messageVisible"
      :append-to-body="true"
      :lock-scroll="false"
      width="30%"
      title="留言"
      :close-on-click-modal="true"
      class="subscribe"
    >
      <Message v-on:OnMessage="OnMess" />
    </el-dialog>
    <el-dialog
      :visible.sync="customized"
      :append-to-body="true"
      :lock-scroll="false"
      width="25%"
      :close-on-click-modal="true"
      class="subscribe"
    >
      <Customized v-on:OndialogTable="Ondiong" />
    </el-dialog>
  </div>
</template>
<script>
import Header from "@/components/pc_file/header.vue";
import Footer from "@/components/pc_file/footer.vue";
import Right from "@/components/pc_file/right.vue";
import Subscribe from "@/components/pc_file/dialog/subscribe.vue";
import Message from "@/components/pc_file/dialog/message.vue";
import Customized from "@/components/pc_file/dialog/customized.vue";
export default {
  data() {
    return {
      activeName: "right",
      tabNum: 1,
      oneStop: 1,
      numpost: 0,
      tabCard: 1,
      total: 0,
      search: "", //搜索框
      borderText: "自由购",
      dialogTableVisible: false,
      messageVisible: false,
      customized: false,
      page: 1,
      list: [
        require(`@/assets/img/banner.png`),
        require(`@/assets/img/banner.png`),
        require(`@/assets/img/banner.png`)
      ],
      tabList: [],
      tabsList: [],
      img: [],
      oneStopList: [
        {
          id: "1",
          img: require(`@/assets/img/derstand.png`),
          unimg: require(`@/assets/img/understand.png`),
          text: "咨询与了解"
        },
        {
          id: "2",
          img: require(`@/assets/img/unentrust.png`),
          unimg: require(`@/assets/img/entrust.png`),
          text: "方案与委托"
        },
        {
          id: "3",
          img: require(`@/assets/img/unindeed.png`),
          unimg: require(`@/assets/img/indeed.png`),
          text: "看房与尽调"
        },
        {
          id: "4",
          img: require(`@/assets/img/unbond.png`),
          unimg: require(`@/assets/img/bond.png`),
          text: "缴纳保证金"
        },
        {
          id: "5",
          img: require(`@/assets/img/unoffer.png`),
          unimg: require(`@/assets/img/offer.png`),
          text: "竞拍与出价"
        },
        {
          id: "6",
          img: require(`@/assets/img/unassist.png`),
          unimg: require(`@/assets/img/assist.png`),
          text: "贷款与抵押"
        },
        {
          id: "7",
          img: require(`@/assets/img/unauction.png`),
          unimg: require(`@/assets/img/auction.png`),
          text: "物业与权属"
        },
        {
          id: "8",
          img: require(`@/assets/img/untransfer.png`),
          unimg: require(`@/assets/img/transfer.png`),
          text: "腾房与交房"
        }
      ],
      methodList: [
        {
          title: "公证岗",
          text: "负责提供公证服务，全权代办各项手续，为您省时省力",
          img: require(`@/assets/img/gzg.png`)
        },
        {
          title: "法院岗",
          text: "负责法院对接工作，专业律师为您解决法院相关流程",
          img: require(`@/assets/img/fyg.png`)
        },
        {
          title: "法拍金融岗",
          text: "负责金融贷款业务，帮助购房者规避贷款风险",
          img: require(`@/assets/img/finance.png`)
        },
        {
          title: "产权岗",
          text: "负责产权过户，税费缴纳，使得产权交接顺利完成",
          img: require(`@/assets/img/cqg.png`)
        },
        {
          title: "权证法务岗",
          text: "负责后续房产腾退协调、相关变更工作，使购房者顺利入住",
          img: require(`@/assets/img/qzfwg.png`)
        },
        {
          title: "物权交付岗",
          text: "负责法律相关支持，通过丰富的法务经验，控制风险",
          img: require(`@/assets/img/wqjfg.png`)
        }
      ],
      bankList: [
        require(`@/assets/img/yh1.png`),
        require(`@/assets/img/yh2.png`),
        require(`@/assets/img/yh3.png`),
        require(`@/assets/img/yh5.png`),
        require(`@/assets/img/yh7.png`),
        require(`@/assets/img/yh8.png`),
        require(`@/assets/img/yh9.png`),
        require(`@/assets/img/yh10.png`),
        require(`@/assets/img/yh11.png`),
        require(`@/assets/img/yh12.png`)
      ],
      tabcardOne: [
        {
          img: require(`@/assets/img/pqzx.png`),
          text: "1v1全程解答拍房流程 制定选房方案",
          title: "拍前咨询"
        },
        {
          img: require(`@/assets/img/sdkc.png`),
          text: "满足客户需求的房源 可实地带委托人看房",
          title: "实地勘查"
        },
        {
          img: require(`@/assets/img/lsjd.png`),
          text: "查验资产瑕疵、欠费情况 评估房源拍卖风险",
          title: "律师尽调"
        },
        {
          img: require(`@/assets/img/sfcs.png`),
          text: "免费评估房产价值 核算各类费用",
          title: "税费测算"
        }
      ],
      tabcardTwo: [
        {
          img: require(`@/assets/img/jpdy.png`),
          text: "遇到任何竞拍问题随时提供答疑服务 及时反馈委托人",
          title: "竞拍答疑"
        },
        {
          img: require(`@/assets/img/cpzd.png`),
          text: "全程参与拍卖，现场出价指导 竞价风险控制",
          title: "参拍指导"
        },
        {
          img: require(`@/assets/img/jjkz.png`),
          text: "拍卖过程中提供安全价格建议 规避拍卖风险",
          title: "竞价控制"
        },
        {
          img: require(`@/assets/img/dkbj.png`),
          text: "多家银行金融机构合作 解决客户购房资金问题",
          title: "贷款白金"
        }
      ],
      tabcardThree: [
        {
          img: require(`@/assets/img/cdws.png`),
          text: "协助委托人领取裁定文书 提供专业咨询",
          title: "裁定文书"
        },
        {
          img: require(`@/assets/img/cqgh.png`),
          text: "可享受3到12个月过户无忧保证 未达成则按市场价格赔付租金",
          title: "产权过户"
        },
        {
          img: require(`@/assets/img/fwjg.png`),
          text: "专业腾退团队，保证按时交付 未按期交付可回购",
          title: "房屋交付"
        },
        {
          img: require(`@/assets/img/axrz.png`),
          text: "入住2年内如遇侵扰，可提供免费支持",
          title: "安心入住"
        }
      ],
      purchList: []
    };
  },
  methods: {
    On53() {
      window.open(
        "https://tb.53kf.com/code/client/9a12bb00652ff2c013fe004ae3947f845/1",
        "_blank"
      );
      this.stopBubbling(event);
    },
    stopBubbling(e) {
      e = window.event || e;
      if (e.stopPropagation) {
        e.stopPropagation(); //阻止事件 冒泡传播
      } else {
        e.cancelBubble = true; //ie兼容
      }
    },
    submitForm() {
      this.dialogTableVisible = true; //默认页面不显示为false,点击按钮将这个属性变成true
    },
    messageForm() {
      this.messageVisible = true; //默认页面不显示为false,点击按钮将这个属性变成true
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    funtab(val) {
      console.log(val);
      this.tabNum = val;
      if (val == 1) {
        this.Onweek();
      } else if (val == 2) {
        this.OnSellHouse();
      } else if (val == 3) {
        this.OnCheapHouse();
      }
    },
    Onweek(val) {
      this.instance
        .NewHouse({
          page: 1,
          limit: 4,
          order: "sell_time_d"
        })
        .then(res => {
          console.log(res);
          this.tabList = res.data.data;
          this.tabList.forEach((item, index) => {
            if (item.imgUrl) {
              item.img = item.imgUrl.split(",");
            }
          });
        })
        .catch(function(error) {});
    },
    OnSellHouse() {
      this.instance
        .SellHouse({
          page: 1,
          limit: 4,
          order: "sell_time_d"
        })
        .then(res => {
          console.log(res);
          this.tabList = res.data.data;
          this.tabList.forEach((item, index) => {
            if (item.imgUrl) {
              item.img = item.imgUrl.split(",");
            }
          });
        })
        .catch(function(error) {});
    },
    OnCheapHouse() {
      this.instance
        .CheapHouse({
          page: 1,
          limit: 4,
          order: "sell_time_d"
        })
        .then(res => {
          console.log(res);
          this.tabList = res.data.data;
          this.tabList.forEach((item, index) => {
            if (item.imgUrl) {
              item.img = item.imgUrl.split(",");
            }
          });
        })
        .catch(function(error) {});
    },
    OnFreedomBuy() {
      this.purchList = [];
      this.instance
        .FreedomBuy({
          page: this.page,
          limit: 3,
          order: "sell_time_d"
        })
        .then(res => {
          console.log(res);
          this.purchList = res.data.data;
          this.purchList.forEach(item => {
            if (item.imgUrl) {
              item.img = item.imgUrl.split(",");
            }
          });
          this.total = res.data.count;
        })
        .catch(function(error) {});
    },
    OnCheapbyHouse() {
      this.purchList = [];
      this.instance
        .CheapbyHouse({
          page: this.page,
          limit: 3,
          order: "sell_time_d"
        })
        .then(res => {
          console.log(res);
          this.purchList = res.data.data;
          this.purchList.forEach(item => {
            item.img = item.imgUrl.split(",");
          });
          this.total = res.data.count;
        })
        .catch(function(error) {});
    },
    Onstap(val) {
      this.oneStop = val;
      this.$router.push({ path: `/one_stop?#tab${val}` });
    },
    fuborder(val) {
      this.page = 1;
      console.log(this.page);
      this.borderText = val;
      if (val == "自由购") {
        this.OnFreedomBuy();
      } else {
        this.OnCheapbyHouse();
      }
    },
    Onpost(val) {
      this.numpost = val;
    },
    Ontabcard(val) {
      this.tabCard = val;
    },
    handleCurrentChange(val) {
      console.log(val);
      this.page = val;
      if (this.borderText == "自由购") {
        this.OnFreedomBuy();
      } else {
        this.OnCheapbyHouse();
      }
    },
    onDetails(item) {
      console.log(item);
      this.$router.push({ name: "Details", query: { id: item } });
    },
    changeActive($event) {
      $event.currentTarget.className = "tab_card card";
    },
    removeActive($event) {
      $event.currentTarget.className = " card";
    },
    // 立即搜索接口
    Onsearch() {
      // 调用接口
      this.$router.push({
        name: "AllRooms",
        params: { title: this.search }
      });
    },
    OnMap() {
      this.$router.push({
        name: "Map"
      });
    },
    Onmore() {
      this.$router.push({ path: "/allRooms" });
    },
    onsolve() {
      this.$router.push({ path: "/loan" });
    },
    Ondiong() {
      this.customized = false;
    },
    OnMess() {
      this.messageVisible = false;
    },
    Onsubscribe() {
      console.log("111");
      this.dialogTableVisible = false;
    }
  },
  mounted() {
    this.Onweek();
    this.OnFreedomBuy();
  },
  components: {
    Header,
    Footer,
    Right,
    Subscribe,
    Message,
    Customized
  }
};
</script>
<style lang="less" scoped>
.untab {
  height: 100px;
  text-align: center;
  line-height: 100px;
}
p {
  font-size: 16px;
}
@media screen and (min-width: 1360px) and (max-width: 1600px) {
  .select {
    left: 250px;
  }
}
@media screen and (min-width: 1601px) {
  .select {
    left: 360px;
  }
}
.select {
  position: absolute;
  top: 475px;
  z-index: 5;
  box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.05);
  background: rgba(0, 0, 0, 0.678);
  width: 936px;
  height: 199px;
  color: #fff;
  padding: 0 30px;
  .exclusive {
    margin: 26px 0 17px 0;
  }
  .Atonce {
    font-size: 22px;
    margin-right: 15px;
  }
  .plan {
    font-size: 18px;
  }
  .select_ipt {
    position: relative;
    .select_btn1 {
      cursor: pointer;
      position: absolute;
      right: 200px;
      top: 25px;
      color: #3f4545;
      border-left: 1px solid #3f4545;
      padding-left: 10px;
    }
    .select_btn {
      cursor: pointer;
      position: absolute;
      right: 6px;

      top: 5px;
      background: linear-gradient(0deg, #f07f00, #ea5d3a, #f5885e);
      width: 156px;
      height: 56px;
      line-height: 56px;
      text-align: center;
    }
  }
  .more {
    font-size: 16px;
    margin: 21px 0 27px 0;
    span {
      margin-right: 10px;
    }
  }
}
.box {
  width: 1200px;
  margin: 0 auto;
  padding-top: 60px;
  .title {
    font-size: 38px;
    font-weight: bold;
    color: #091631;
    margin-bottom: 10px;
  }
  .subhead {
    overflow: hidden;
    margin-bottom: 19px;
    font-size: 16px;
    .subhead_left {
      float: left;
      font-size: 16px;
      color: #999999;
    }
    .subhead_right {
      float: right;
      font-size: 16px;
      color: #d91515;
    }
  }

  .tab_title {
    display: flex;
    background: #f5f5f5;
    border-radius: 6px;
    // width: 404px;
    height: 48px;
    line-height: 24px;
    color: #333333;
    font-size: 16px;
    p {
      width: 33.33%;
      text-align: center;
      margin: 0;
      line-height: 48px;
    }
    .ontab {
      font-size: 16px;
      background: linear-gradient(0deg, #ef7f00, #e95d39, #f5875d);
      color: #ffffff;
    }
  }
}

.service {
  background: url("~@/assets/img/yzsbg.png") center center no-repeat;
  height: 511px;
  .one_stop {
    display: flex;
    font-size: 16px;
    margin: 40px 0;
    .num {
      position: relative;
      bottom: 15px;
      left: 50px;
      border-radius: 50%;
      width: 33px;
      height: 33px;
      line-height: 33px;
      text-align: center;
    }
    .unNum {
      border: 1px solid #ebebeb;
      background: #fff;
    }
    .onNum {
      border: 1px solid #ebebeb;
      background: #f5633f;
      border: none;
    }
    img {
      margin: 5px 0 10px 0;
    }
    .text {
      color: #f4633f;
    }
  }
  .derstand {
    cursor: pointer;
    width: 136px;
    height: 115px;
    background: #fff;
    border-radius: 2px;
    text-align: center;
    margin-right: 15px;
  }
  .derstand:last-child {
    margin-right: 0px;
  }
}
.liberty {
  width: 1200px;
  margin: 60px auto;
  box-shadow: 0px 3px 18px 0px rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  .cards {
    display: flex;
    .card {
      cursor: pointer;
      width: 50%;
      height: 160px;
      display: flex;
      padding: 22px;
      .title {
        font-size: 18px;
        font-weight: bold;
      }
      .ontitle {
        color: #f57f57;
        font-size: 18px;
        font-weight: bold;
      }
      .untitle {
        font-size: 18px;
        font-weight: bold;
        color: #fdab33;
      }
      .subhead {
        margin: 15px 0px;
      }
      .line {
        width: 16px;
        height: 4px;
        background: #f9695d;
      }
      .online {
        width: 16px;
        height: 4px;
        background: #fd9d37;
      }
      .noline {
        width: 16px;
        height: 4px;
        background: #fff;
      }
      .btn {
        cursor: pointer;
        width: 146px;
        height: 36px;
        background: linear-gradient(0deg, #f9695d, #f7774b);
        border-radius: 4px;
        line-height: 36px;
        text-align: center;
        color: #fff;
        margin-top: 30px;
      }
      .onbtn {
        cursor: pointer;
        width: 146px;
        height: 36px;
        background: #fdab33;
        border-radius: 4px;
        line-height: 36px;
        text-align: center;
        color: #fff;
        margin-top: 30px;
      }
      .free {
        width: 70%;
      }
      .collect {
        width: 60%;
      }
      .text {
        margin-top: 30px;
        // border-bottom: 1px solid #333;
      }
      .customized {
        color: #fd504f;
      }
      .picture {
        text-align: center;
        cursor: pointer;
      }
    }
  }
  .content {
    position: relative;
    border: 1px solid #ff5151;
    border-top: none;
    padding: 28px;
  }
  .border {
    border-bottom: 1px solid #ff5151;
  }
  .noborder {
    border-top: 1px solid #ff5151;
    border-left: 1px solid #ff5151;
    border-right: 1px solid #ff5151;
  }
  .pageSize {
    position: absolute;
    right: 0;
    bottom: 10px;
  }
}
.tab {
  padding: 40px 0;
  display: flex;
  .tab_detalis:last-child {
    margin-right: 0px;
  }
  .tab_list:last-child {
    margin-right: 0px;
  }
  .tab_list {
    cursor: pointer;
    width: 31%;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    margin-right: 30px;
  }
  .tab_detalis {
    cursor: pointer;
    margin-right: 30px;
    width: 276px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
  }
  img {
    width: 100%;
    height: 214px;
    border-radius: 6px;
    position: relative;
  }
  .address {
    width: 100%;

    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin: 34px 0 11px 0;
    font-weight: bold;
    color: #333;
  }
  .details {
    color: #656565;
  }
  .price {
    color: #656967;
    margin: 20px 0 19px 0;
  }
  .startPrice {
    overflow: hidden;
    .start {
      float: left;
      font-weight: bold;
      color: #333;
      margin: 0;
      span {
        color: #d91515;
      }
    }
    .btn {
      cursor: pointer;
      float: right;
      background: linear-gradient(0deg, #ef7f00, #ef7d01);
      border-radius: 6px;
      width: 64px;
      height: 32px;
      line-height: 32px;
      font-size: 14px;
      color: #fff;
      text-align: center;
    }
  }
}
.finance {
  background: url("~@/assets/img/jrdkb.png") no-repeat;
  background-color: #fbfbfb;
  .head {
    color: #fff;
    width: 1200px;
    margin: 0 auto;
    padding-top: 53px;
    .head_title {
      font-size: 38px;
      font-weight: bold;
    }
    .present {
      padding: 40px 0px 33px 0px;
    }
  }
  .bankList {
    width: 1200px;
    height: 300px;
    margin: 0 auto;
    background: #ffffff;
    box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    padding: 50px 35px;
    .bank {
      overflow: hidden;
      div {
        float: left;
        width: 20%;
        height: 70px;
        line-height: 70px;
        text-align: center;
        padding-bottom: 60px;
      }
    }
  }
  .moreBtn {
    border: 1px solid #dbdbdb;
    border-radius: 23px;
    width: 120px;
    height: 46px;
    margin: 0 auto;
    text-align: center;
    line-height: 46px;
  }
}
.law {
  background-color: #fbfbfb;
  .post_box_item:hover .post_box {
    border: 1px solid #f57f57;
  }
  .post {
    overflow: hidden;
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 50px;
    .post_box {
      float: left;
      width: 358px;
      background: #fff;
      height: 140px;
      border-radius: 6px;
      margin-right: 40px;
      margin-bottom: 30px;
      display: flex;
      border: 1px solid #fff;
      .line {
        width: 11px;
        height: 140px;
        background: linear-gradient(0deg, #ef7f00, #e95d39, #f5875d);
        border-radius: 6px 0px 0px 6px;
      }
      .center {
        padding: 28px 0 28px 40px;
        .center_title {
          font-size: 18px;
          font-weight: bold;
          color: #212121;
        }
        .indirect {
          font-size: 14px;
          color: #656565;
          line-height: 24px;
          margin-top: 20px;
        }
      }
      .center_img {
        width: 40px;
        height: 40px;
        padding: 25px 27px 0 0;
      }
    }

    .post_box:last-child {
      padding: 0;
    }
  }
}
.course {
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 50px;
  .switch {
    box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    display: flex;
    .tab_card {
      // width: 328px;
      background: #fff;
      box-shadow: 0px 3px 43px 0px rgba(0, 0, 0, 0.05);
      border-radius: 6px;

      .card_tab {
        height: 33.33%;
        width: 300px;
        padding: 0 20px;
        position: relative;
        cursor: pointer;
        img {
          position: absolute;
          right: 20px;
          top: 20px;
        }
      }
      .card_On {
        background: linear-gradient(0deg, #f5885e, #ea5d3a);
      }
      .card_title {
        font-size: 22px;
        color: #222222;
        padding-top: 20px;
      }
      .Oncard_title {
        font-size: 22px;
        color: #ffffff;
        padding-top: 20px;
      }
      .card_text {
        font-size: 14px;
        color: #a9a9a9;
        margin-top: 10px;
      }
      .card_text {
        font-size: 14px;
        color: #fac0b1;
        margin-top: 10px;
      }
    }
    .tab_conter {
      width: 872px;
      margin: 18px 74px 0;
      .card {
        float: left;
        width: 35%;
        height: 90px;
        padding: 26px;
        margin-right: 45px;
        margin-bottom: 20px;
        display: flex;
        position: relative;
        .image {
          width: 30px;
          height: 30px;
          margin-right: 40px;
        }
        .title {
          font-size: 18px;
          color: #27282a;
          margin-bottom: 21px;
        }
        .conter {
          color: #656565;
        }
        .service_div {
          display: none;
          width: 327px;
          height: 129px;
          background: rgba(255, 255, 255, 0.425);
          box-shadow: 0px 0px 8px 1px rgba(245, 242, 242, 0.06);
          position: absolute;
          top: 0;
          left: 0;
        }

        .service_img {
          position: absolute;
          left: 35%;
          top: 20%;
        }
      }
      .card:hover .service_div {
        display: block;
      }
    }
  }
}
.picture {
  position: relative;
  text-align: center;
  width: 100%;
  height: 214px;
  .rebate {
    width: 38px;
    height: 43px;
    background: url("~@/assets/img/zk.png") no-repeat;
    position: absolute;
    top: -5px;
    right: 20px;
    line-height: 43px;

    font-size: 12px;
    color: #fff;
  }
  .soon {
    position: absolute;
    top: 0;
    width: 89px;
    height: 31px;
    background: linear-gradient(0deg, #19aa6b, #3cd6a2, #3cd8a4);
    border-radius: 6px 0px 6px 0px;
    line-height: 31px;
    color: #fff;
    font-size: 14px;
  }
  .soonGreen {
    background: linear-gradient(0deg, #19aa6b, #3cd6a2, #3cd8a4);
  }
  .soonRed {
    background: #d91615;
  }
  .time {
    position: absolute;
    top: 200px;
    left: 25px;
    width: 226px;
    height: 33px;
    background: #ffffff;
    box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.05);
    border-radius: 17px;
    font-size: 14px;
    line-height: 33px;
  }
  .camera {
    position: absolute;
    right: 15px;
    top: 160px;
    text-align: right;
    .start {
      font-size: 12px;
      color: #fff;
    }
    .hour {
      color: #fa6c5b;
      font-size: 16px;
    }
  }
}
.subscribe > .el-dialog {
  width: 504px;
}
</style>
<style>
.select_ipt > .el-input > .el-input__inner {
  height: 66px;
  line-height: 66px;
}
.cur {
  cursor: pointer;
}
</style>
